	<h2>在控制面板上布局 - Border Layout on Panel</h2>
	<div class="demo-info" style="margin-bottom:10px">
		<div class="demo-tip icon-tip"></div>
		<div>它也能在控制面板上布局。</div>
	</div>
	
	<div class="easyui-layout" style="width:700px;height:400px;">
		<div data-options="region:'north'" style="overflow:hidden;padding:10px">
			<h2>在控制面板（Panel）上布局</h2>
		</div>
		<div data-options="region:'south',split:true" style="height:50px;background:#fafafa;"></div>
		<div data-options="region:'east',iconCls:'icon-reload',split:true" title="East" style="width:180px;"></div>
		<div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
		<div data-options="region:'center',title:'Main Title'" style="background:#fafafa;overflow:hidden">
			<table class="easyui-datagrid"
					data-options="url:'documentation/datagrid_data2.json',border:false,fit:true,fitColumns:true">
				<thead>
					<tr>
						<th data-options="field:'itemid'" width="80">Item ID</th>
						<th data-options="field:'productid'" width="100">Product ID</th>
						<th data-options="field:'listprice',align:'right'" width="80">List Price</th>
						<th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
						<th data-options="field:'attr1'" width="150">Attribute</th>
						<th data-options="field:'status',align:'center'" width="50">Status</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
<h3>页面代码： </h3>
<pre name="code" class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
	&lt;title&gt;Border Layout on Panel - jQuery EasyUI Demo&lt;/title&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/default/easyui.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/icon.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;demo.css&quot;&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery.easyui.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;h2&gt;在控制面板上布局 - Border Layout on Panel&lt;/h2&gt;
	&lt;div class=&quot;demo-info&quot; style=&quot;margin-bottom:10px&quot;&gt;
		&lt;div class=&quot;demo-tip icon-tip&quot;&gt;&lt;/div&gt;
		&lt;div&gt;它也能在控制面板上布局。&lt;/div&gt;
	&lt;/div&gt;
	
	&lt;div class=&quot;easyui-layout&quot; style=&quot;width:700px;height:400px;&quot;&gt;
		&lt;div data-options=&quot;region:'north'&quot; style=&quot;overflow:hidden;padding:10px&quot;&gt;
			&lt;h2&gt;在控制面板（Panel）上布局&lt;/h2&gt;
		&lt;/div&gt;
		&lt;div data-options=&quot;region:'south',split:true&quot; style=&quot;height:50px;background:#fafafa;&quot;&gt;&lt;/div&gt;
		&lt;div data-options=&quot;region:'east',iconCls:'icon-reload',split:true&quot; title=&quot;East&quot; style=&quot;width:180px;&quot;&gt;&lt;/div&gt;
		&lt;div data-options=&quot;region:'west',split:true&quot; title=&quot;West&quot; style=&quot;width:100px;&quot;&gt;&lt;/div&gt;
		&lt;div data-options=&quot;region:'center',title:'Main Title'&quot; style=&quot;background:#fafafa;overflow:hidden&quot;&gt;
			&lt;table class=&quot;easyui-datagrid&quot;
					data-options=&quot;url:'datagrid_data2.json',border:false,fit:true,fitColumns:true&quot;&gt;
				&lt;thead&gt;
					&lt;tr&gt;
						&lt;th data-options=&quot;field:'itemid'&quot; width=&quot;80&quot;&gt;Item ID&lt;/th&gt;
						&lt;th data-options=&quot;field:'productid'&quot; width=&quot;100&quot;&gt;Product ID&lt;/th&gt;
						&lt;th data-options=&quot;field:'listprice',align:'right'&quot; width=&quot;80&quot;&gt;List Price&lt;/th&gt;
						&lt;th data-options=&quot;field:'unitcost',align:'right'&quot; width=&quot;80&quot;&gt;Unit Cost&lt;/th&gt;
						&lt;th data-options=&quot;field:'attr1'&quot; width=&quot;150&quot;&gt;Attribute&lt;/th&gt;
						&lt;th data-options=&quot;field:'status',align:'center'&quot; width=&quot;50&quot;&gt;Status&lt;/th&gt;
					&lt;/tr&gt;
				&lt;/thead&gt;
			&lt;/table&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>